<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<script src="../js/common/jquery.js"></script>
<script src="../js/common/drag.js"></script>
<script src="../js/common/angular.min.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/table.js"></script>
</head>
<body ng-app="myApp">

<div class="dqwz">
    <span>当前位置：</span>
    <span>AngularJS 表格</span>
</div>

<section>
    <div ng-controller="tableCtrl">
        <h3>【在表格中显示数据】</h3>
        <table style="width: 100%;" border="1px">
            <thead>
                <tr>
                    <td>{{nameTh}}</td>
                    <td>{{ageTh}}</td>
                    <td>{{heightTh}}</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in students">
                    <td>{{x.name}}</td>
                    <td>{{x.age}}岁</td>
                    <td>{{x.height}}cm</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td class="red">{{errorInfo}}</td>
                </tr>
            </tfoot>
        </table>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<table style="width: 100%;" border="1px">
    <thead>
        <tr>
            <td>{{nameTh}}</td>
            <td>{{ageTh}}</td>
            <td>{{heightTh}}</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in students">
            <td>{{x.name}}</td>
            <td>{{x.age}}岁</td>
            <td>{{x.height}}cm</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td class="red">{{errorInfo}}</td>
        </tr>
    </tfoot>
</table>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('tableCtrl',function($scope,$rootScope,$http){
    $http({
        method:'GET',
        url:'../php/tableData.php',
    }).then(function successCallback(reponse){
        $scope.students = reponse.data.studentObj;
    },function errorCallback(reponse){
        $rootScope.errorInfo = "请求失败！";
    })
    $scope.indexTh = '序号';
    $scope.nameTh = '姓名';
    $scope.ageTh = '年龄';
    $scope.heightTh = '身高';
})
            </xmp>
            <span>【php源码】</span>
            <xmp>
<?php
echo <<<EOT
{
"studentObj":[
{"name":"小李","age":"25","height":"175"},
{"name":"小华","age":"26","height":"177"},
{"name":"小明","age":"23","height":"172"},
{"name":"小红","age":"24","height":"165"},
{"name":"小张","age":"25","height":"173"}
]
}
EOT;
?>
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div ng-controller="tableCtrl">
        <h3>【显示序号】</h3>
        <table style="width: 100%;" border="1px">
            <thead>
                <tr>
                    <td>{{indexTh}}</td>
                    <td>{{nameTh}}</td>
                    <td>{{ageTh}}</td>
                    <td>{{heightTh}}</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in students">
                    <td>{{$index+1}}</td>
                    <td>{{x.name}}</td>
                    <td>{{x.age}}岁</td>
                    <td>{{x.height}}cm</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td class="red">{{errorInfo}}</td>
                </tr>
            </tfoot>
        </table>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<table style="width: 100%;" border="1px">
    <thead>
        <tr>
            <td>{{indexTh}}</td>
            <td>{{nameTh}}</td>
            <td>{{ageTh}}</td>
            <td>{{heightTh}}</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in students">
            <td>{{$index+1}}</td>
            <td>{{x.name}}</td>
            <td>{{x.age}}岁</td>
            <td>{{x.height}}cm</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td class="red">{{errorInfo}}</td>
        </tr>
    </tfoot>
</table>
            </xmp>
            <span>【js源码】</span>
            <xmp>
同第一个
            </xmp>
            <span>【php源码】</span>
            <xmp>
同第一个
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div ng-controller="tableCtrl">
        <h3>【隔行变色($odd奇数,$even偶数,初始:0)】</h3>
        <table style="width: 100%;" border="1px">
            <thead>
                <tr>
                    <td>{{nameTh}}</td>
                    <td>{{ageTh}}</td>
                    <td>{{heightTh}}</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in students">
                    <td ng-if="$odd" style="color:blue">{{x.name}}</td>
                    <td ng-if="$even" style="color:green">{{x.name}}</td>
                    <td ng-if="$odd" style="color:blue">{{x.age}}岁</td>
                    <td ng-if="$even" style="color:green">{{x.age}}岁</td>
                    <td ng-if="$odd" style="color:blue">{{x.height}}cm</td>
                    <td ng-if="$even" style="color:green">{{x.height}}cm</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td class="red">{{errorInfo}}</td>
                </tr>
            </tfoot>
        </table>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<table style="width: 100%;" border="1px">
    <thead>
        <tr>
            <td>{{nameTh}}</td>
            <td>{{ageTh}}</td>
            <td>{{heightTh}}</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in students">
            <td ng-if="$odd" style="color:blue">{{x.name}}</td>
            <td ng-if="$even" style="color:green">{{x.name}}</td>
            <td ng-if="$odd" style="color:blue">{{x.age}}岁</td>
            <td ng-if="$even" style="color:green">{{x.age}}岁</td>
            <td ng-if="$odd" style="color:blue">{{x.height}}cm</td>
            <td ng-if="$even" style="color:green">{{x.height}}cm</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td class="red">{{errorInfo}}</td>
        </tr>
    </tfoot>
</table>
            </xmp>
            <span>【js源码】</span>
            <xmp>
同第一个
            </xmp>
            <span>【php源码】</span>
            <xmp>
同第一个
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

</section>

<div class="mask_layer">
</div>

</body>
</html>